<template>
  <div class="user-container">
    <el-button type="primary" @click="openAddUserModal">添加用户</el-button>

    <el-table :data="userData" stripe class="user-table">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="用户名" />
      <el-table-column prop="contact" label="联系方式" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="department" label="所属部门" />
      <el-table-column prop="joinDate" label="加入时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="openEditUserModal(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 用户编辑/添加弹层 -->
    <el-dialog
      v-model="userModalVisible"
      :title="isEdit ? '编辑用户' : '添加用户'"
    >
      <el-form :model="userForm" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userForm.name" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input v-model="userForm.contact" placeholder="请输入联系方式" />
        </el-form-item>

        <el-form-item label="角色">
          <el-select v-model="userForm.role" placeholder="选择角色">
            <el-option label="普通职员" value="普通职员" />
            <el-option label="审计" value="审计" />
            <el-option label="资料员" value="资料员" />
            <el-option label="会计" value="会计" />
            <el-option label="系统工程师" value="系统工程师" />
            <el-option label="文员" value="文员" />
            <el-option label="总经理" value="总经理" />
            <el-option label="副总经理" value="副总经理" />
            <el-option label="秘书" value="秘书" />
            <el-option label="销售员" value="销售员" />
            <el-option label="设计师" value="设计师" />
            <el-option label="推广" value="推广" />
            <el-option label="人资顾问" value="人资顾问" />
            <el-option label="人资主管" value="人资主管" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属部门">
          <el-select v-model="userForm.department" placeholder="选择部门">
            <el-option label="业务部" value="业务部" />
            <el-option label="财务部" value="财务部" />
            <el-option label="技术部" value="技术部" />
            <el-option label="总经办" value="总经办" />
            <el-option label="人力资源部" value="人力资源部" />
            <el-option label="市场部" value="市场部" />
          </el-select>
        </el-form-item>

        <el-form-item label="加入时间">
          <el-date-picker
            v-model="userForm.joinDate"
            type="date"
            placeholder="选择加入时间"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveUser">保存</el-button>
          <el-button @click="cancelUser">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const userData = ref([
      {
        id: 1,
        name: "张三",
        contact: "13515551112",
        role: "普通职员",
        department: "业务部",
        joinDate: "2022-01-01"
      },
      {
        id: 2,
        name: "李四",
        contact: "13611223135",
        role: "审计",
        department: "财务部",
        joinDate: "2023-05-05"
      },
      {
        id: 3,
        name: "王五",
        contact: "18899282323",
        role: "资料员",
        department: "业务部",
        joinDate: "2024-04-03"
      },
      {
        id: 4,
        name: "陈六",
        contact: "19022909923",
        role: "系统工程师",
        department: "技术部",
        joinDate: "2022-03-06"
      }
    ]);

    const userModalVisible = ref(false);
    const isEdit = ref(false);
    const currentUser = ref(null);

    const userForm = ref({
      id: null,
      name: "",
      contact: "",
      role: "",
      department: "",
      joinDate: ""
    });

    const openAddUserModal = () => {
      isEdit.value = false;
      resetUserForm();
      userModalVisible.value = true;
    };

    const openEditUserModal = user => {
      isEdit.value = true;
      currentUser.value = user;
      userForm.value = { ...user };
      userModalVisible.value = true;
    };

    const saveUser = () => {
      if (isEdit.value && currentUser.value) {
        Object.assign(currentUser.value, userForm.value);
        ElMessage.success("编辑成功");
      } else {
        userData.value.push({
          ...userForm.value,
          id: userData.value.length + 1
        });
        ElMessage.success("添加成功");
      }
      userModalVisible.value = false;
      resetUserForm();
    };

    const cancelUser = () => {
      userModalVisible.value = false;
      resetUserForm();
      ElMessage.info("操作已取消");
    };

    const deleteUser = user => {
      userData.value = userData.value.filter(u => u.id !== user.id);
      ElMessage.success("用户已删除");
    };

    const resetUserForm = () => {
      userForm.value = {
        id: null,
        name: "",
        contact: "",
        role: "",
        department: "",
        joinDate: ""
      };
      currentUser.value = null;
    };

    return {
      userData,
      userModalVisible,
      isEdit,
      userForm,
      openAddUserModal,
      openEditUserModal,
      saveUser,
      cancelUser,
      deleteUser
    };
  }
};
</script>

<style scoped>
.user-container {
  margin: auto;
  padding: 20px;
}

.user-table {
  margin-top: 20px;
  width: 100%;
}
</style>
